<template>
  <a-modal
    :open="cancelModel"
    title="取消预定"
    :width="900"
    :maskClosable="false"
    :confirmLoading="cancelLoading"
    @ok="submitCancel"
    @cancel="cancelCancel"
  >
    <a-divider />
    <a-form
      name="basic"
      ref="crcancelFormRef"
      :model="cancelForm"
      :rules="cancelFormRules"
      :label-col="{ style: { width: '120px' } }"
      autocomplete="off"
    >
      <a-form-item label="场地" name="siteNumbers">
        <a-checkbox-group v-model:value="cancelForm.siteNumbers" name="radioGroup">
          <a-checkbox v-for="item in venueInfo.venueNumber" :key="item" :value="item"
            >场地{{ item }}</a-checkbox
          >
        </a-checkbox-group>
      </a-form-item>
      <a-form-item label="订场日期" name="dueDateRange">
        <a-range-picker v-model:value="cancelForm.dueDateRange" class="input-01" />
      </a-form-item>
      <a-form-item label="订场时间" name="dueTimeRange">
        <a-time-range-picker
          v-model:value="cancelForm.dueTimeRange"
          class="input-01"
          format="HH:mm"
          :hideDisabledOptions="true"
          :minuteStep="30"
          :disabledTime="disabledTime"
        />
      </a-form-item>
    </a-form>
    <a-divider />
  </a-modal>
</template>
<script setup lang="ts" name="ReservationCancel">
import type { CancelForm, VenueInfo } from '#/reserve-home'
import { message } from 'ant-design-vue'
import type { Rule } from 'ant-design-vue/es/form'
import { computed, reactive, ref, watch, type UnwrapRef } from 'vue'
import { cancelVenueReservation } from '@/api/reserve-home'
import dayjs, { Dayjs } from 'dayjs'

const emit = defineEmits(['update:cancelModel', 'cancelSuccess'])
const props = defineProps({
  cancelModel: {
    type: Boolean,
    default: false
  },
  venueInfo: {
    type: Object,
    default: () => {}
  },
  currentDate: {
    type: String,
    default: ''
  },
  cancelVenue: {
    type: Array,
    default: () => []
  },
  cancelTime: {
    type: String,
    default: ''
  }
})
const cancelModel = computed(() => props.cancelModel)
const venueInfo = computed(() => props.venueInfo as VenueInfo)
const currentDate = computed(() => props.currentDate)
const cancelVenue = computed(() => props.cancelVenue as number[])
const cancelTime = computed(() => props.cancelTime)

const cancelLoading = ref(false)
const crcancelFormRef = ref()
const cancelForm: UnwrapRef<CancelForm> = reactive({
  siteNumbers: [],
  dueStartTime: undefined,
  dueEndTime: undefined,
  dueStartDate: undefined,
  dueEndDate: undefined,
  dueDateRange: undefined,
  dueTimeRange: undefined
})
const cancelFormRules: Record<string, Rule[]> = {
  siteNumbers: [{ required: true, message: '请选择场地', trigger: 'blur' }],
  dueType: [{ required: true, message: '请选择订场类型', trigger: 'blur' }],
  dueDateRange: [{ required: true, message: '请选择订场日期', trigger: 'change' }],
  dueTimeRange: [{ required: true, message: '请选择订场时间', trigger: 'change' }],
  customerName: [{ required: true, message: '请输入顾客姓名', trigger: 'change' }],
  mobile: [{ required: true, message: '请输入手机尾号', trigger: 'change' }]
}

const submitCancel = () => {
  crcancelFormRef.value.validate().then(() => {
    cancelLoading.value = true
    cancelForm.dueStartTime = cancelForm!.dueTimeRange![0]!.format('HH:mm')
    cancelForm.dueEndTime = cancelForm!.dueTimeRange![1]!.format('HH:mm')
    cancelForm.dueStartDate = cancelForm!.dueDateRange![0]!.format('YYYY-MM-DD')
    cancelForm.dueEndDate = cancelForm!.dueDateRange![1]!.format('YYYY-MM-DD')
    cancelVenueReservation(cancelForm)
      .then(() => {
        message.success('取消预定场地成功')
        emit('cancelSuccess')
        cancelCancel()
      })
      .catch(() => {
        cancelLoading.value = false
      })
  })
}

const cancelCancel = () => {
  crcancelFormRef.value.resetFields()
  emit('update:cancelModel', false)
  cancelLoading.value = false
}

const disabledTime = (_now: Dayjs, _type: 'start' | 'end') => {
  const disabledHours: number[] = []
  const startHour = dayjs(venueInfo.value.startTime, 'HH:mm').hour()
  const endHour = dayjs(venueInfo.value.endTime, 'HH:mm').hour() + 1
  for (let i = 0; i < startHour; i++) {
    disabledHours.push(i)
  }
  for (let i = endHour; i < 24; i++) {
    disabledHours.push(i)
  }
  return {
    disabledHours: () => disabledHours
  }
}

const getDefault = () => {
  cancelForm.dueDateRange = [dayjs(currentDate.value), dayjs(currentDate.value)]
  cancelForm.siteNumbers = cancelVenue.value
  if (cancelTime.value) {
    cancelForm.dueTimeRange = [
      dayjs(cancelTime.value, 'HH:mm'),
      dayjs(cancelTime.value, 'HH:mm').add(30, 'minute')
    ]
  } else {
    cancelForm.dueTimeRange = undefined
  }
}

watch(
  () => props.cancelModel,
  (val) => {
    val && getDefault()
  }
)
</script>
<style lang="less" scoped>
.input-01 {
  width: 400px;
}
</style>
